<template>
  <view class="comment-item">
    <image 
      class="avatar" 
      :src="comment.avatar" 
      mode="aspectFill"
      @click="goToUserPage"
    />
    <view class="comment-content">
      <view class="comment-header">
        <text class="nickname">{{ comment.nickname }}</text>
        <text class="time">{{ formatTime(comment.createTime) }}</text>
      </view>
      <view class="comment-text">{{ comment.content }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 从props接收评论数据
const props = defineProps({
  comment: {
    type: Object,
    required: true
  }
});

// 格式化时间
const formatTime = (timestamp) => {
  const now = Date.now();
  const diff = now - timestamp;
  
  // 一分钟内
  if (diff < 60 * 1000) {
    return '刚刚';
  }
  
  // 一小时内
  if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`;
  }
  
  // 一天内
  if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
  }
  
  // 一周内
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`;
  }
  
  // 超过一周
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 跳转到用户主页
const goToUserPage = () => {
  // 如果是匿名评论，不跳转
  if (!props.comment.userId) {
    return;
  }
  
  uni.navigateTo({
    url: `/pages/community/user?id=${props.comment.userId}`
  });
};
</script>

<style lang="scss" scoped>
.comment-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
  }
  
  .comment-content {
    flex: 1;
    
    .comment-header {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
      
      .nickname {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        margin-right: 8px;
      }
      
      .time {
        font-size: 12px;
        color: #999999;
      }
    }
    
    .comment-text {
      font-size: 14px;
      color: #333333;
      line-height: 1.5;
      word-break: break-all;
    }
  }
}
</style>
